<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width,user-scalable=no">
   <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
  <title>导游考试APP</title>
  <style>
    *, *::before, *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      user-select: none;
    }

    a {
      text-decoration: none;
    }

    html, body {
      font-size: calc(100vw / 750);
      width: 100%;
      height: 100%;
      overflow: hidden;
      font-family: Source Han Sans CN Medium, Source Han Sans CN Medium-Medium;
      color: white;
    }

    /*p {*/
    /*  font-size: 32px;*/
    /*}*/

    .container {
      width: inherit;
      height: inherit;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

    }

    .container > * {
      width: 100%;
    }

    main {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    main > img {
      margin-bottom: 8vw;
      width:30vw;
      height:30vw;
    }

    footer {
      height:70vw;
      background: url("./image/bg.png") no-repeat;
      background-size: 100% 100%;
      padding-top: 30vw;
      text-align: center;
    }

    .app-name {
      font-size: 5vw;
      font-weight: 500;
      color: #401814;
      margin-bottom: 40px;
    }

    .desc {
      font-size: 4vw;
      font-weight: 400;
      color: #9d8484;
    }

    .btn-group {
      display: flex;
      width: inherit;
      justify-content: space-evenly;
      margin-bottom: 60px;
    }

    a {
      width: 40vw;
      line-height: 10vw;
      display: block;
      height: 10.4vw;
      border: 2px solid white;
      color: white;
      border-radius: 10vw;
      font-size: 3.5vw;
      font-weight: 400;
      background: transparent;
			display: flex;
			justify-content: center;
			align-items: center;
    }
		a i{
			display: block;
			width: 5vw;
			height: 5vw;
			margin-right: 2vw;
		}
		.bottom-txt{
			line-height: 6vw;
			letter-spacing: .15vw;
		}
   .bottom-txt p text{
      opacity: 0.8;
      font-size: 3.5vw;
      font-weight: 400;
    }
   .bottom-txt p > span {
		  opacity:1;
      font-size: 4vw;
      font-weight: 500;
			margin-left: 1vw;
    }

    .btn-group > a {
      background-position-x: 48px !important;
    }

    #android i{
      background: url("./image/android.png") no-repeat left;
			background-size: 100% 100%;
    }

    #iphone i{
      background: url("./image/iphone.png") no-repeat left;
			background-size: 100% 100%;
    }
  </style>
</head>
<body>
<div class="container">
  <main>
    <img src="./image/logo.png" alt="">
    <p class="app-name">易游通</p>
    <p class="desc">海量在线题库+教学视频+组卷考试</p>
  </main>
  <footer>
    <div class="btn-group">
      <a href="javascript:;" class="btnClick" onclick="wxClick(this)" id="iphone"><i></i>iPhone下载</a>
      <a href="javascript:;" class="btnClick" onclick="wxClick(this)" id="android"><i></i>Android下载</a>
    </div>
		<div class="bottom-txt">
			<p><text>涵盖全方位知识点</text></p>
			<p><text>轻松搞定</text><span>导游资格证</span></p>
		</div>
  </footer>
	<div class="modal" id="modal">选择版本与您的系统不匹配</div>
</div>
<div id="mask" onclick="maskDis()">
	<img src="image/yindao.png" />
</div>
<style>
	.modal{
		 position: fixed;
		 background: rgba(0,0,0,.5);
		 color: #fff;
		 font-size: 4vw;
		 padding: 2vw 4vw;
		 width: auto;
		 border-radius: 1vw;
		 display: none;
	}
	#mask{
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0,0,0,.5);
		width: 100%;
		height: 100%;
		display: none;
	}
	#mask img{
		width: 60%;
		float: right;
		margin: 20px;
	}
</style>
	 <script src="./jquery-1.8.3.min.js"></script>
<script>
	const userDevice = navigator.userAgent;
	const appid = "1530664104"
	const ios = `https://itunes.apple.com/cn/app/qq/id${appid}?mt=8`;
	const android = "https://pro-platform.oss-cn-beijing.aliyuncs.com/exam/exam.apk"
  window.onload = () => {
    if (userDevice.includes('iPhone') || userDevice.includes('iPad')) {
			$('#android').attr("disabled", "disabled");
      document.querySelector('#iphone').setAttribute('href', ios);
    } else{
			$('#iphone').attr("disabled", "disabled");
			 document.querySelector('#android').setAttribute('href', android);
		}
  }
	function getAllNum(type){
		 if(type=='disabled'){
			 $('.modal').show();
			 setTimeout(function(){
				  $('.modal').hide();
			 },1000)
			 return
		 }
		 $.ajax({
			type:'get',
			url:'http://47.94.213.158:9007/base/statisticsDownloadCou',
			success:function(res){
				console.log(' 统计')
			}
		})
	}
	//判断是否微信
	function isWeiXin(){
	  //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
	  var ua = window.navigator.userAgent.toLowerCase();
	  //通过正则表达式匹配ua中是否含有MicroMessenger字符串
	  if(ua.match(/MicroMessenger/i) == 'micromessenger'){
	  return true;
	  }else{
	  return false;
	  }
	}
	function maskDis(){
		document.getElementById("mask").style.display="none";	
	}
	function wxClick(obj){
		const type=$(obj).attr("disabled")
		if(isWeiXin()){
		    // 是微信浏览器，执行操作
			document.getElementById('mask').style.display="inline"
		}else{
			getAllNum(type);
			return false
		}
	}
	function iosBtn(){
		document.getElementById("modal").style.display="inline";
		setTimeout(function(){
		document.getElementById("modal").style.display="none";	
		},1000)
	}
</script>
</body>
</html>
